<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: block;
            border: 1px solid red;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <canvas class="box" width="600" height="400"></canvas>
</body>

</html>
<script>
    //弧度与度的关系
    //2 * PI * 弧度 = 360°
    //1弧度 约等于 57.4°

    //获取DOM
    let canvas = document.querySelector('.box');
    //获取上下文
    let ctx = canvas.getContext('2d');
    //绘制圆形
    //参数:x,y 前面两个参数
    //第三个参数:r
    //第四|五,绘制圆的起始的弧度与结束的弧度
    //是否逆时针绘制圆：true->逆时针绘制  false:顺时针绘制

    //   ctx.arc(300,200,100,0,2*Math.PI,true);
    //   ctx.lineWidth="20";//绘制线段的宽度
    //   ctx.strokeStyle="red";//线段的颜色
    //   ctx.fillStyle="cyan";//圆的填充的颜色
    //   ctx.fill();//开始填充颜色
    //   //绘制圆形
    //   ctx.stroke();

    //绘制同心圆
    for (var i = 1; i < 100; i++) {
        ctx.beginPath();
        ctx.arc(300, 200, i * 2, 0, Math.PI * 2, true);
        ctx.stroke();
    }
</script>